<template>
  <div class="da">
    <div class="sy">首页  <span>关注</span></div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="san">
      <div>
        <img src="../../assets/hlq/lingyang.png" alt="" />
        <div>领养</div>
      </div>
      <div>
        <img src="../../assets/hlq/huli.png" alt="" />
        <div>护理</div>
      </div>
      <div>
        <img src="../../assets/hlq/kepu.png" alt="" />
        <div>科普</div>
      </div>
      <div>
        <img src="../../assets/hlq/yimiao.png" alt="" />
        <div>疫苗</div>
      </div>
      <div>
        <img src="../../assets/hlq/daodian.png" alt="" />
        <div>到店</div>
      </div>
      <div>
        <img src="../../assets/hlq/qiuzhu.png" alt="" />
        <div>求助</div>
      </div>
    </div>
    <div class="auto">
      <div class="nav">
        <div class="cw">
          <img src="../../assets/hlq/huo.png" alt="" />热门宠物
        </div>
        <div class="dq">
          宠物大全<img src="../../assets/hlq/youjiantou.png" alt="" />
        </div>
      </div>
      <div class="hh1">
        <img src="../../assets/hlq/touxiang1.png" alt="" />
        <div>小狗</div>
      </div>
      <div class="hh">
        <div>110w人气</div>
        <img class="imgs" src="../../assets/hlq/huo.png" alt="" />
        <img src="../../assets/hlq/guanzhu.png" alt="" />
      </div>
      <div class="hh1">
        <img src="../../assets/hlq/touxiang2.png" alt="" />
        <div>猫咪</div>
      </div>
      <div class="hh">
        <div>110w人气</div>
        <img class="imgs" src="../../assets/hlq/huo.png" alt="" />
        <img src="../../assets/hlq/guanzhu.png" alt="" />
      </div>
      <div class="hh1">
        <img src="../../assets/hlq/touxiang3.png" alt="" />
        <div>鸟类</div>
      </div>
      <div class="hh">
        <div>110w人气</div>
        <img class="imgs" src="../../assets/hlq/huo.png" alt="" />
        <img src="../../assets/hlq/guanzhu.png" alt="" />
      </div>
      <div class="hh1">
        <img src="../../assets/hlq/touxiang4.png" alt="" />
        <div>水族</div>
      </div>
      <div class="hh">
        <div>110w人气</div>
        <img class="imgs" src="../../assets/hlq/huo.png" alt="" />
        <img src="../../assets/hlq/guanzhu.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "home_kjb",
  components: {},
  setup() {
    const images = [
      require("../../assets/hlq/beijing.jpg"),
      require("../../assets/hlq/beijing2.jpg"),
      require("../../assets/hlq/beijing.jpg"),
      require("../../assets/hlq/beijing2.jpg"),
    ];
    return { images };
  },
};
</script>
<style lang="less" scoped>
.da {
  width: 25.9375rem;
  height: 42.8125rem;
  margin: auto;
  border: 0.0625rem solid white;
  background: #ffff;
}
.sy {
  text-align: center;
  font-size: 3.125rem;
  font-size: 24px;
  color: #000000;
  font-weight: bold;
  font-family: "Ping Fang  SC  Bold";
  span{
    display: inline-block;
    margin-left: 40px;
    margin-bottom: 10px;
  }
}
.auto {
  width: 23.4375rem;
  margin: 0.75rem auto;
}
.san {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.hh1 {
  position: relative;
  width: 12.5rem;
  height: 3.75rem;
  float: left;
}
.imgs {
  /* margin-top: 1.25rem !important; */
  margin: 1.5rem 1.25rem 0 0.3125rem !important;
}
.hh div {
  float: left;
}
.hh img {
  float: left;
  margin: 1rem 0;
}
.san img {
  width: 2.5rem;
}
.two {
  margin-left: 4.375rem;
  margin-top: -2.8125rem;
}
.ke {
  margin-left: 8.75rem;
  margin-top: -3.125rem;
}
.ym {
  margin-left: 13.125rem;
  margin-top: -3.125rem;
}
.dd {
  margin-left: 17.5rem;
  margin-top: -3.125rem;
}
.qz {
  margin-left: 21.875rem;
  margin-top: -3.125rem;
}
.cw {
  font-size: 0.9375rem;
}
.nav {
  margin-bottom: 0.8125rem;
  margin-top: 0.8125rem;
}
.hh1 div {
  position: absolute;
  left: 4.5rem;
  margin-top: -2.5rem;
}
.dq {
  margin-left: 18.75rem;
  margin-top: -0.9375rem;
  font-size: 0.9375rem;
}
.hh {
  height: 3.75rem;
  line-height: 3.75rem;
  float: right;
}
.hh,
.hh1 {
  margin-bottom: 1.25rem;
}
</style>